<template>
  <div id="app">
    <!-- 动态组件 -->
    <!-- <div class="btn-container">
      <div class="btn" :class="page=='Home'?'active':''" @click="toggle('Home')">首页</div>
      <div class="btn" :class="page=='News'?'active':''" @click="toggle('News')">新闻</div>
      <div class="btn" :class="page=='User'?'active':''" @click="toggle('User')">用户</div>
    </div>
    <component :is='page'></component> -->

    <!-- 7.路由导航链接 to属性代表跳转的路由url， tag属性代表最终解析的标签 -->
    <div class="cotainer">
      <!-- <router-link class="link" to="/home" tag="div">首页</router-link>
      <router-link class="link" to="/news" tag="div">新闻</router-link>
      <router-link class="link" to="/user" tag="div">用户</router-link> -->
      <router-link class="link" :to="{name:'home'}" tag="div">首页</router-link>
      <router-link class="link" :to="{name:'news'}" tag="div">新闻</router-link>
      <router-link class="link" :to="{name:'user'}" tag="div">用户</router-link>
    </div>

    <!-- 6.添加路由占位符，也就是当前路由渲染的位置 -->
    <router-view></router-view>
  </div>
</template>

<script>
// import Home from './page/Home.vue'
// import News from './page/News.vue'
// import User from './page/User.vue'
export default {
  name: "App",
  data() {
    return {
      page: "Home",
    };
  },
  components: {
    // Home,News,User
  },
  methods: {
    // toggle(page){
    //   this.page = page
    // }
  },
};
</script>

<style>
/* .btn-container {
  display: flex;
}
.btn {
  width: 100px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  border: 1px solid #000;
  cursor: pointer;
}
.active {
  background-color: pink;
} */
.cotainer {
  display: flex;
}
.link {
  width: 100px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  border: 1px solid #000;
  cursor: pointer;
}
.active {
  background-color: gold;
}
</style>
